// 分类组件样式
.category-title-container {
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .category-main-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 36rpx;
      background-color: #1b7dec;
      border-radius: 4rpx;
    }
  }
}

.cat-item {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 20rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .item {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    box-sizing: border-box;
    
    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #333;
    }
    
    &:active {
      background-color: #f0f0f0;
    }
  }
}

.category-container {
  display: flex;
  height: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.left-menu {
  width: 30%;
  background-color: #f8f8f8;
  
  .menu-item {
    padding: 24rpx 16rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      background-color: #fff;
      color: #1b7dec;
      font-weight: bold;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 36rpx;
        background-color: #1b7dec;
        border-radius: 0 4rpx 4rpx 0;
      }
    }
  }
}

.right-content {
  width: 70%;
  padding: 20rpx 0;
  
  .category-item {
    padding: 0 30rpx;
    
    .category-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 20rpx;
      border-bottom: 1rpx solid #f0f0f0;
      color: #333;
      
      &:last-child {
        border-bottom: none;
      }
      
      .category-title {
        font-size: 28rpx;
        flex: 1;
      }
      
      .arrow-right {
        font-size: 32rpx;
        color: #999;
        min-width: 40rpx;
        text-align: right;
        transition: transform 0.3s ease;
      }
    }
    
    &:active {
      background-color: #f0f0f0;
      
      .arrow-right {
        transform: translateX(10rpx);
      }
    }
  }
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  color: #999;
  font-size: 28rpx;
  
  .no-data-text {
    opacity: 0.6;
  }
}
<template>
  <view class="container">
    <view class="bg-sear">
      <view class="scrolltop">
        <view
          class="section"
          @tap="toSearchPage"
        >
          <image
            src="@/static/images/icon/search.png"
            class="search-img"
          />
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- swiper -->
      <swiper
        :autoplay="autoplay"
        :indicator-color="indicatorColor"
        :interval="interval"
        :duration="duration"
        :indicator-active-color="indicatorActiveColor + ' '"
        :circular="true"
        class="pic-swiper"
        indicator-dots
        previous-margin="20rpx"
        next-margin="20rpx"
      >
        <block
          v-for="(item, index) in indexImgs"
          :key="index"
        >
          <swiper-item class="banner-item">
            <view class="img-box">
              <image
                :src="item.imageUrl"
                :data-link="item.linkUrl"
                class="banner"
                @tap="toBannerPage"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- end swiper -->

      <!-- 分类课程标题 -->
      <view class="category-title-container" v-if="prodFlag">
        <text class="category-main-title">分类课程</text>
      </view>
    
      <view class="cat-item" v-if="prodFlag">
        <view
          v-for="(subject, index) in subjectlist" 
          :key="subject.id"
          class="item"
          data-sts="1"
          :data-id="subject.id"
          :data-title="subject.title"
          @tap="toClassifyPage"
        >
          <image src="@/static/images/icon/getCoupon.png" />
          <text>{{ subject.title }}</text>
        </view>        
      </view>

      <!-- 消息播放 -->
      <view
        v-if="news && news.length"
        class="message-play"
        @tap="onNewsPage"
      >
        <image
          src="@/static/images/icon/horn.png"
          class="hornpng"
        />
        <swiper
          :vertical="true"
          :autoplay="true"
          :circular="true"
          duration="1000"
          class="swiper-cont"
        >
          <block
            v-for="(item, index) in news"
            :key="index"
          >
            <swiper-item class="items">
              {{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <text class="arrow" />
      </view>
      
      <!-- 分类刷题标题 -->
      <view class="category-title-container">
        <text class="category-main-title">分类刷题</text>
      </view>
      
      <!-- 新的左右菜单分类展示 -->
      <view class="category-container">
        <!-- 左侧一级分类 -->
        <scroll-view class="left-menu" scroll-y>
          <view 
            v-for="(subject, index) in subjectlist" 
            :key="subject.id"
            class="menu-item"
            :class="{ active: currentCategoryIndex === index }"
            @tap="selectCategory(index)"
          >
            <text class="menu-text">{{ subject.title }}</text>
          </view>
        </scroll-view>
        
        <!-- 右侧二级分类 -->
        <scroll-view class="right-content" scroll-y>
          <view 
            v-for="(child, childIndex) in subjectlist[currentCategoryIndex]?.children || []" 
            :key="child.id"
            class="category-item"
            :data-id="child.id"
            @tap="toQuestionPage"
          >
            <view class="category-content">
              <text class="category-title">{{ child.title }}</text>
              <text class="arrow-right">→</text>
            </view>
          </view>
          
          <!-- 无二级分类时的提示 -->
          <view 
            v-if="!(subjectlist[currentCategoryIndex]?.children && subjectlist[currentCategoryIndex]?.children.length > 0)" 
            class="no-data"
          >
            <text class="no-data-text">暂无子分类</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <tabBar :current="current"></tabBar>
  </view>
</template>

<script setup>
// import tabBar from '../../components/tabBar/tabBar.vue'
const wxs = number()
const indicatorColor = ref('#d1e5fb')
const indicatorActiveColor = ref('#1b7dec')
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(1000)
const indexImgs = ref([])
const seq = ref(0)
const news = ref([])
const taglist = ref([])
const subjectlist = ref([])
const updata = ref(true)
const current = ref(0)
const prodFlag = ref(false)
const currentCategoryIndex = ref(0) // 当前选中的一级分类索引

onLoad(() => {
  prodFlag.value = uni.getStorageSync('prodFlag')
  getAllData()
})
onShow(() => {
  // #ifdef MP-WEIXIN
  uni.getSetting({
    success (res) {
      if (!res.authSetting['scope.userInfo']) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  })
  // #endif
  http.getCartCount() // 重新计算购物车总数量
  
  //获取当前tabbar的值
  getCurrentId()
})

onPullDownRefresh(() => {
  // 模拟加载
  setTimeout(() => {
    getAllData()
    uni.stopPullDownRefresh() // 停止下拉刷新
  }, 100)
})

const getCurrentId = () => {  
  const tabBarObj = uni.getStorageSync('tabbar')
  // 获取当前页面栈的实例
  let pages = getCurrentPages();
  // 获取当前页面的路由
  let currentPage = pages[pages.length - 1];
  for(var i in tabBarObj){
    if(tabBarObj[i].url == "/"+currentPage.route){
      current.value = i;
    }
  }
}

const getAllData = () => {
  // http.getCartCount()// 重新计算购物车总数量
  getIndexImgs()
  getNoticeList()
  // getTag()
  getSubjectList()
}

const toProdPage = (e) => {
  const prodid = e.currentTarget.dataset.prodid

  if (prodid) {
    uni.navigateTo({
      url: '/pages/question/question?prodid=' + prodid
    })
  }
}
/**
 * 加入购物车
 * @param item
 */
const addToCart = (item) => {
  uni.showLoading({
    mask: true
  })
  http.request({
    url: '/prod/prodInfo',
    method: 'GET',
    data: {
      prodId: item.prodId
    }
  })
    .then(({ data }) => {
      http.request({
        url: '/p/shopCart/changeItem',
        method: 'POST',
        data: {
          basketId: 0,
          count: 1,
          prodId: data.prodId,
          shopId: data.shopId,
          skuId: data.skuList[0].skuId
        }
      })
        .then(() => {
          uni.hideLoading()
          http.getCartCount() // 重新计算购物车总数量
          uni.showToast({
            title: '加入购物车成功',
            icon: 'none'
          })
        })
    })
}

const toCouponCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '程序员努力开发中...'
  })
}

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

/**
 * 跳转课程活动页面
 * @param e
 */
const toClassifyPage = (e) => {
  let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
  const id = e.currentTarget.dataset.id
  const title = e.currentTarget.dataset.title
//debugger
  if (id) {
    url += '&tagid=' + id + '&title=' + title
  }

  uni.navigateTo({
    url
  })
}
/**
 * 跳转公告列表页面
 */
const onNewsPage = () => {
  uni.navigateTo({
    url: '/pages/recent-news/recent-news'
  })
}

/**
 * 加载轮播图
 */
const getIndexImgs = () => {
  http.request({
    // domain: 'https://api4xyz.xndpy.com',
    url: '/cmsservice/bannerfront/getAllBanner',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      indexImgs.value = data.list
      seq.value = data.list
    })
}

const getNoticeList = () => {
  // 加载公告
  http.request({
    url: '/shop/notice/topNoticeList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      news.value = data
    })
}

/**
 * 加载课程标题分组列表
 */
const getTag = () => {
  http.request({
    url: '/prod/tag/prodTagList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      taglist.value = data
      for (let i = 0; i < data.length; i++) {
        updata.value = false
        updata.value = true
        getTagProd(data[i].id, i)
      }
    })
}

const getTagProd = (id, index) => {
  http.request({
    url: '/prod/prodListByTagId',
    method: 'GET',
    data: {
      tagId: id,
      size: 6
    }
  })
    .then(({ data }) => {
      updata.value = false
      updata.value = true
      const taglistParam = taglist.value
      taglistParam[index].prods = data.records
      taglist.value = taglistParam
    })
}

const getSubjectList = () => {
  http.request({
    // domain: 'https://api4xyz.xndpy.com',
    url: '/eduservice/subject/getSubject',
    method: 'GET',
    data: {}
  })
  .then(({ data }) => {
    subjectlist.value = data
    // 默认选中第一个一级分类
    if (data && data.length > 0) {
      currentCategoryIndex.value = 0
    }
  })
}

/**
 * 跳转到题目页面
 * @param e
 */
const toQuestionPage = (e) => {
  const id = e.currentTarget.dataset.id
  uni.navigateTo({
    url: '/pages/question/question?id=' + id
  })
}

const selectCategory = (index) => {
  currentCategoryIndex.value = index
}

const toBannerPage = (e) => {
  const link = e.currentTarget.dataset.link

  if (link) {
    // 根据链接类型进行跳转
    if (link.startsWith('/')) {
      uni.navigateTo({
        url: link
      })
    } else {
      // 处理外部链接或其他类型链接
      window.open(link, '_blank')
    }
  }
}

</script>

<style scoped lang="scss">
@use './index.scss';
</style>
